<%@ include file="header.jsp"%>
<div id="listDiv"/>


<script type="text/javascript">
function doDelete(rowIdx){
	var grid = Ext.getCmp('itemGrid');
	if(grid){
		grid.getStore().removeAt(parseInt(rowIdx));
		grid.getView().refresh();
	}
}

Ext.onReady(function(){
var grid,itemWin,itemStore;

if(!grid){
	var store = new Ext.data.Store({
        autoLoad: false,
		fields:['id', 'name','desc'],
		proxy: {
			type: 'ajax',
			url: 'getLists.action',  // url that will load data with respect to start and limit params
			reader: {
				type: 'json',
				root: 'items',
				totalProperty: 'size'
			}
		}
	});
	
	grid = Ext.create('Ext.grid.Panel', {
		title: 'All Lists',
		forceFit: true,
		loadMask: true,
		autoScroll:true,
		columns: [
			{ header: 'List Name',  dataIndex: 'name', width: 100},
			{ header: 'List Description',  dataIndex: 'desc'}],
		store: store,
		width: parseInt(Ext.getBody().getWidth())*0.98,
		height: Ext.getBody().getHeight()-100,
		renderTo: 'listDiv',
		listeners:{
			'itemdblclick':function(view,record,item,index,e,eOpts){
				if(!itemWin){
					itemStore = new Ext.data.Store({
						autoLoad: false,
						fields:['name'],
						proxy: {
							type: 'ajax',
							url: 'getList.action',  // url that will load data with respect to start and limit params
							reader: {
								type: 'json',
								root: 'itemList'
							}
						}
					});
					var itemForm = Ext.create('Ext.form.Panel', {
						frame:true,
						bodyStyle:'padding:5px 5px 0',
						border:0,
						defaultType: 'textfield',
						defaults: {
							anchor: '100%',
							iconAlign:'top'
						},
						layout:{
							type:'table',
							columns:2
						},
						items:[{
							id: 'itemName',
							width:200
						},{
							xtype:'button',
							text:'Add',
							align:'left',
							width:50,
							style:{
								marginLeft:20,
								marginBottom:5,
								marginRight:320
							},
							handler:function(){
								var value = Ext.getCmp('itemName').getValue();
								if(value!=''&&value!=null){
									if(itemStore.find('name',value)>-1){
										Ext.MessageBox.alert('Warning', 'Dup item name.');
									}else{
										itemStore.add({name:value});
										Ext.getCmp('itemGrid').getView().refresh();
									}
								}
							}
						},{
							xtype:'grid',
							id:'itemGrid',
							store:itemStore,
							frame:true,
							colspan:2,
							width:480,
							height:400,
							autoScroll:true,
							multiSelect: true,
							viewConfig: {
								plugins: {
									ptype: 'gridviewdragdrop',
									dragText: 'move the records to the place you want'
								},
								listeners:{
									drop:function(){
										Ext.getCmp('itemGrid').getView().refresh();
									}
								}
							},
							columns: [
							{ header: 'Item Name',  dataIndex: 'name',flex:1}, {
								xtype: 'gridcolumn',
								width: 40,
								renderer: function(value,a,obj,idx){
									return '<img src="images/delete.gif" onclick="doDelete('+idx+')"/>';
								}
							}]
						}]
					});
					
					itemWin = Ext.create('Ext.Window', {
						title: 'Modify Items',
						width: 510,
						height: 500,
						border:0,
						modal:true,
						buttonAlign : "center",
						defaultType: 'textfield',
						defaults: {
							anchor: '100%'
						},
						items: [itemForm,{
							xtype:'hidden',
							id:'hiddenListId'
						}],
						closeAction: function(){
							itemWin.hide();
						},
						buttons:[{
							text:'Save',
							id:'btnSave',
							handler:function(){
								itemWin.getEl().mask('saveing data...');
								var names='';
								for(var i=0;i<itemStore.getCount();i++){
									names+=itemStore.getAt(i).data.name;
									if(i<itemStore.getCount()-1){
										names+=',';
									}
								}
								Ext.Ajax.request({
									url: 'saveList.action',
									params: {
										listId: Ext.getCmp('hiddenListId').getValue(),
										itemNames: names
									},
									success: function(response){
										var result = Ext.decode(response.responseText);
										if(result.state==0){
											flashMessage('data saved.','btnSave',1500);
										}else{
											Ext.MessageBox.alert('Warning', 'save failed,please try again later.');
										}
										itemWin.getEl().unmask();
									}
								});
							}
						},{
							text:'Cancel',
							handler:function(){
								itemWin.hide();
							}
						}]
					});
				}
				Ext.getCmp('hiddenListId').setValue(record.data.id);
				Ext.getCmp('itemName').setValue('');
				itemStore.load({params:{listId:record.data.id}});
				itemWin.show();
			}
		}
	});
	
	store.load();
	grid.getView().refresh();
}

});
</script>

<%@ include file="footer.jsp"%>